import React from "react";
import classNames from 'classnames';
import { getView } from "../component";
import "../content/view/index.less";

export default class FieldView extends React.Component {
  render() {
    const { field, ...rest } = this.props;
    const ComponentView = getView(field.type);
    
    if (!ComponentView) return ComponentView;
    
    const type = field.config.complex ? 'complex' : 'single';

    return (
      <div 
        data-id={field.uuid}
        className={`wea-edc-form-item wea-edc-${type}-field ${classNames({ hide: !field.visible })}`} 
      >
        <ComponentView
          type={field.type}
          value={field.value}
          data={field.config}
          {...rest}
        />
      </div>
    );
  }
}

FieldView.defaultProps = {
  onChange: () => { }
};